---
title: Astro 사이트를 Vercel에 배포
description: Vercel을 사용하여 Astro 사이트를 웹에 배포하는 방법.
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

[Vercel](http://vercel.com/)을 사용하면 구성 없이 Astro 사이트를 전세계 에지 네트워크에 배포할 수 있습니다.

이 가이드에는 웹사이트 UI 또는 Vercel의 CLI를 통해 Vercel에 배포하는 방법이 포함되어 있습니다.

## 프로젝트 구성

Astro 프로젝트는 정적 사이트 또는 서버 측 렌더링 사이트 (SSR)로 Vercel에 배포될 수 있습니다.

### 정적 사이트

Astro 프로젝트는 기본적으로 정적 사이트입니다. 정적 Astro 사이트를 Vercel에 배포하기 위한 추가 구성이 필요하지 않습니다.

### SSR용 어댑터

다음은 Astro 프로젝트에서 SSR을 활성화하고 Vercel에 배포하는 방법입니다.

Astro 프로젝트에서 SSR을 활성화하기 위해 다음 `astro add` 명령을 사용하여 [Vercel 어댑터](/ko/guides/integrations-guide/vercel/)를 추가하세요. 그러면 어댑터가 설치되고 `astro.config.mjs` 파일에 한번에 적절히 변경됩니다.

```bash
npx astro add vercel
```

어댑터를 수동으로 설치하려는 경우, 다음 두 단계를 완료하세요.

1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 [`@astrojs/vercel` 어댑터](/ko/guides/integrations-guide/vercel/)를 설치합니다. npm을 사용하거나 확실하지 않은 경우, 터미널에서 다음을 실행합니다.

    ```bash
      npm install @astrojs/vercel
    ```

1. `astro.config.mjs` 프로젝트 구성 파일에 새로운 두 줄을 추가하세요.

    ```js title="astro.config.mjs" ins={2, 5-6}
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';

    export default defineConfig({
      output: 'server',
      adapter: vercel(),
    });
    ```

## 배포 방법

웹사이트 UI 또는 Vercel의 CLI (명령 줄 인터페이스)를 통해 Vercel에 배포할 수 있습니다. 정적 및 SSR Astro 사이트 모두 동일한 과정을 거칩니다.

### 웹사이트 UI 배포

1. 코드를 온라인 Git 저장소 (GitHub, GitLab, BitBucket)에 푸시합니다.
2. Vercel로 [프로젝트를 가져옵니다](https://vercel.com/new).
3. Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.
4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/))

프로젝트를 가져와 배포된 후, 브랜치의 모든 후속 푸시는 [배포 미리보기](https://vercel.com/docs/concepts/deployments/preview-deployments)를 생성하고, 프로덕선 브랜치 (일반적으로 "main")에 대한 모든 변경 사항은 [프로덕션 배포](https://vercel.com/docs/concepts/deployments/environments#production)에 반영됩니다.

<ReadMore>Vercel의 [Git 통합](https://vercel.com/docs/concepts/git)에 대해 더 알아보세요.</ReadMore>


### CLI 배포

1. [Vercel CLI](https://vercel.com/cli)를 설치하고 `vercel`을 실행하여 배포합니다.

    ```bash
    npm install -g vercel
    vercel
    ```

2. Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다.
3. `Want to override the settings? [y/N]`라는 질문에 대한 답변으로 `N`을 선택합니다.
4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/))


### vercel.json을 이용한 프로젝트 구성

`vercel.json`을 사용하여 Vercel의 기본 동작을 재정의하고 추가 설정을 구성할 수 있습니다. 예를 들어, 배포의 HTTP 응답에 헤더를 첨부하려는 경우가 있을 수 있습니다.

<ReadMore>[Vercel의 프로젝트 설정](https://vercel.com/docs/project-configuration)에 대해 더 알아보세요.</ReadMore>

### Astro 2.0으로 업그레이드

Astro v2.0은 Node 14 버전에 대한 지원을 중단하였으므로, 프로젝트가 **Node `18.14.1` 이상**을 사용하고 있는지 확인하세요. 프로젝트의 Settings 메뉴의 General 페이지에서 빌드 단계 및 서버리스 함수에서 사용되는 [Node.js 버전을 정의](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings)할 수 있습니다.
